<template>
  <div>
    <!-- 修改密码 -->
    <div class="content">
      <br />
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
        label-position="top"
      >
        <div class="ml50">
          <!-- 原始密码 -->
          <div v-if="new2">
            <el-form-item label="原始密码" prop="original_password">
              <el-input
                class="inp"
                v-model="ruleForm.original_password"
                placeholder="请输入原始密码"
              />
            </el-form-item>

            <el-form-item
              label="新密码（不少于6位，且不可与之前设置过的密码重复）"
              prop="confirm_password"
              class="mt40"
            >
              <el-input
                class="inp"
                v-model="ruleForm.confirm_password"
                placeholder="请输入密码（不少于6位）"
              />
            </el-form-item>

            <el-form-item label="确认密码" prop="password" class="mt40">
              <el-input
                class="inp"
                v-model="ruleForm.password"
                placeholder="请再次输入密码"
              />
            </el-form-item>
          </div>
          <!--   -->
          <div v-if="new1">
            <div class="mt69 one">初次设置密码</div>
            <el-form-item
              label="密码（不少于6位）"
              prop="password"
              class="mt10"
            >
              <el-input
                class="inp"
                v-model="ruleForm.password"
                placeholder="请输入密码（不少于6位）"
              />
            </el-form-item>

            <el-form-item label="确认密码" prop="confirm_password" class="mt40">
              <el-input
                class="inp"
                v-model="ruleForm.confirm_password"
                placeholder="请再次输入密码"
              />
            </el-form-item>
          </div>
        </div>

        <div class="footer">
          <el-button @click="resetForm(ruleFormRef)" class="btn">
            取消
          </el-button>
          <el-button
            type="primary"
            class="btnc"
            @click="submitForm(ruleFormRef)"
          >
            保存
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import "../../assets/com/com.scss";
import { ElMessage } from "element-plus";
import { EditchangePassword, EditsetPassword } from "../../Api/login/login";
const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  clientid: "",
  password: "", //初次设置密码
  confirm_password: "", //确认密码
  userpwd: "",
  original_password: "",
});
// 正则
const rules = reactive<FormRules>({
  original_password: [
    { required: true, message: "请输入原始密码", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, max: 12, message: "请输入密码（不少于6位）", trigger: "blur" },
  ],
  confirm_password: [
    { required: true, message: "请再次输入密码", trigger: "blur" },
  ],
  namec: [
    { required: true, message: "请输入密码（不少于6位）", trigger: "blur" },
  ],
  namecon: [{ required: true, message: "请再次输入密码", trigger: "blur" }],
});

const id = JSON.parse(localStorage.getItem("token") || "0");
const clientid = id.clientid;
const userpwd = id.userpwd;
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (userpwd) {
        EditchangePassword({
          password: ruleForm.password,
          confirm_password: ruleForm.confirm_password,
          original_password: ruleForm.original_password,
          clientid,
        }).then((res) => {
          console.log(res);
          if (res.data.code !== 1) {
            ElMessage.error(res.data.msg);
          } else {
            ElMessage({
              message: res.data.msg,
              type: "success",
            });
            // 存token
            localStorage.setItem("token", JSON.stringify(ruleForm));
            // 清空表单
            ruleFormRef.value.resetFields();
          }
        });
      } else {
        EditsetPassword({
          password: ruleForm.password,
          confirm_password: ruleForm.confirm_password,
          clientid,
        }).then((res) => {
          console.log(res);
          if (res.data.code !== 1) {
            ElMessage.error(res.data.msg);
          } else {
            ElMessage({
              message: res.data.msg,
              type: "success",
            });
            // 存token
            localStorage.setItem("token", JSON.stringify(ruleForm));
            // 清空表单
            ruleFormRef.value.resetFields();
          }
        });
      }
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
const new1 = ref();
const new2 = ref();
onMounted(() => {
  const pwd = JSON.parse(localStorage.getItem("token") || "0");
  const userpwd = pwd.userpwd;
  if (userpwd) {
    new1.value = false;
    new2.value = true;
  } else {
    new1.value = true;
    new2.value = false;
  }
});
</script>
<style lang="scss" scoped>
.el-input {
  width: 600px;
}
.content {
  width: 100%;
  position: relative;
  // width: 1610px;
  height: calc(100vh - 150px);
  background: #ffffff;
  .demo-ruleForm {
    margin: 50px 0 0 0;
  }
  .one {
    width: 84px;
    height: 14px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #ff4848;
  }

  .footer {
    // margin-top: 220px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: #ffffff;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
